<!--
 * @Author: Dorange.Wang
 * @Date: 2021-05-13 11:00:36
 * @LastEditors: your name
 * @LastEditTime: 2021-05-13 15:09:15
 * @Description: file content
-->
<template>
  <el-form :model="formData" ref="form" label-width="120px">
    <el-form-item
      label="地址"
      prop="host"
      :rules="[
        { required: fieldRequired, message: '地址不能为空', trigger: 'change' },
        { pattern: HOST_REG, message: '请输入有效地址', trigger: 'change' },
      ]"
    >
      <el-input
        v-model="formData.host"
        placeholder="请输入地址"
        :maxlength="64"
        show-word-limit
      />
    </el-form-item>

    <el-form-item
      label="端口"
      prop="port"
      :rules="[
        { required: fieldRequired, message: '端口不能为空', trigger: 'change' },
        { pattern: PORT_REG, message: '请输入有效的端口', trigger: 'change' },
      ]"
    >
      <el-input
        v-model="formData.port"
        placeholder="请输入端口"
        :maxlength="5"
        show-word-limit
      />
    </el-form-item>

    <el-form-item
      label="数据库"
      prop="databaseName"
      :rules="[
        {
          required: fieldRequired,
          message: '数据库不能为空',
          trigger: 'change',
        },
      ]"
    >
      <el-input
        v-model="formData.databaseName"
        placeholder="请输入数据库"
        :maxlength="64"
        show-word-limit
      />
    </el-form-item>

    <el-form-item
      label="用户名"
      prop="username"
      :rules="[
        {
          required: fieldRequired,
          message: '用户名不能为空',
          trigger: 'change',
        },
      ]"
    >
      <el-input
        v-model="formData.username"
        placeholder="请输入用户名"
        :maxlength="64"
        show-word-limit
      />
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input
        v-model="formData.password"
        placeholder="请输入密码"
        :maxlength="64"
        show-word-limit
        show-password
        autocomplete="new-password"
      />
    </el-form-item>
    <div>
      <el-button
        v-if="type && fieldRequired"
        type="text"
        :loading="testLoading"
        @click="testSource"
        >测试链接</el-button
      >
      <span
        v-if="showTestRes"
        class="ml20"
        :style="{ color: isTestSuccess ? '#5daf34' : '#dd6161' }"
      >
        {{ isTestSuccess ? "连接成功。" : "连接失败!" }}
      </span>
    </div>
  </el-form>
</template>

<script>
import { HOST_REG, PORT_REG } from "@/utils/reg";
import { postHmdatasourceTest } from '@/apis/paas/HmDatasourceController.js'
export default {
  name: "EnvForm",
  props: {
    env: {
      type: String,
      default: "",
    },
    type: {
      // 数据源类型
      type: String,
      default: "",
    },
  },
  data() {
    return {
      HOST_REG,
      PORT_REG,
      formData: {},
      testLoading: false,
      isTestSuccess: false,
      showTestRes: false,
    };
  },

  computed: {
    fieldRequired() {
      const { host, port, databaseName, username } = this.formData;
      const hasHost = (host || "").trim();
      const hasPort = (port || "").trim();
      const hasDatabaseName = (databaseName || "").trim();
      const hasUsername = (username || "").trim();
      return (
        this.env === "DEV" ||
        hasHost ||
        hasPort ||
        hasDatabaseName ||
        hasUsername
      );
    },
  },

  methods: {
    setData(data = {}) {
      this.formData = {
        ...data,
        port: typeof data.port === "number" ? String(data.port) : data.port,
      };

      this.$nextTick(() => {
        this.$refs.form.clearValidate();
        this.showTestRes = false;
      });
    },
    async testSource() {
      const { host, port, databaseName, username, password } = this.formData;
      try {
        await this.$refs.form.validate();
      } catch (error) {
        console.log(error);
        return false;
      }

      const params = {
        host,
        port,
        databaseName,
        username,
        password,
        type: this.type,
      };
      this.testLoading = true;
      this.showTestRes = false;
      postHmdatasourceTest(params)
        .then((res) => {
          this.showTestRes = true;
          this.isTestSuccess = res || false;
        })
        .finally(() => {
          this.testLoading = false;
        });
    },
    async getData() {
      try {
        await this.$refs.form.validate();
        const { host, port, databaseName, username, password } = this.formData;
        const params = {
          host,
          port,
          databaseName,
          username,
          password,
          env: this.env,
        };
        for (const key in params) {
          params[key] = (params[key] || "").trim();
        }
        return params;
      } catch (error) {
        console.log(error);
        return false;
      }
    },
  },
};
</script>

<style>
</style>
